<%@ page language="java" pageEncoding="UTF-8"%>
<!doctype html>
<html lang="zh-CN">
<head>
<%@include file="/WEB-INF/views/commons/common.jsp"%>
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/bootstrap-dialog3/css/bootstrap-dialog.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/validation-engine/validationEngine.jquery.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/jquery-easyui/1.4.3/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/font-awesome/4.3.0/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/webuploader/0.1.5/webuploader.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/viewer/viewer.css">

<link rel="stylesheet" type="text/css" href="${base_href}/static/css/search-theme.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/css/form-theme.css">

<title>新增题目信息</title>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="350">


	<div class="main-wrap">

		<!-- 工具条 start-->
		<div class="container-fluid form-body-header">
			<div class="container">
				<div class="row tool-bar">
					<div class="col-xs-12">
						<button type="button" class="btn btn-sm tool-btn" id="saveBtn">保存</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 工具条 end-->

		<!-- 表单 start-->
		<div class="container-fluid">
			<form id="form">
			
				<input type="hidden" name="quesId" value="${form.quesId }" />
				<input type="hidden" name="replyId" value="${form.replyId }" />
				
				<div class="container form-body-div">
					<div class="row text-center title-body" id="baseinfo">
						问题详细信息<br />
					</div>
					<div class="row pannel-title">
						<span>基本信息</span> <a href="javascript:void(0);" class="hide-next-btn">收起</a>
					</div>
					<div class="row pannel-body">
						<table class="form-table">
							<tr>
								<th class="col-xs-2">学生信息</th>
								<td class="col-xs-10" colspan="3">
									<input type="text" class="form-control" name="quesUserName" value="${form.quesUserName}" />
								</td>
							</tr>
							<tr>
								<th class="col-xs-2 ">问题来源</th>
								<td class="col-xs-4" >
									<select name="questionSource" class="form-control validate[required]" >
										<option value="">请选择</option>
										<c:forEach items="${questionSources}" var="state">
											<option value="${state.code}" <c:if test="${state.code eq form.questionSource}">selected="selected"</c:if>>${state.value}</option>
										</c:forEach> 
									</select>
								</td>
								<th class="col-xs-2 ">是否追问</th>
								<td class="col-xs-4" >
									<select name="quesClosely" class="form-control" >
										<option value="0" <c:if test="${'0' eq form.quesClosely}">selected="selected"</c:if>>否</option>
										<option value="1" <c:if test="${'1' eq form.quesClosely}">selected="selected"</c:if>>是</option>
									</select>
								</td>
							</tr>
							<tr>
								<th class="col-xs-2 ">考试类别</th>
								<td class="col-xs-4">
									<select name="bookClass" class="form-control validate[required]">
										<option value="">请选择</option>
										<c:forEach items="${quesBookClasses}" var="state">
											<option value="${state.code}" <c:if test="${state.code eq form.bookClass}">selected="selected"</c:if>>${state.value}</option>
										</c:forEach> 
									</select>
								</td>
								
								<th class="col-xs-2 ">图书名称</th>
								<td class="col-xs-4">
									<select name="bookSecClass" class="form-control">
										<option value="" selected="selected">请选择</option>
										<c:if test="${form.bookClass eq '1'}">
											<c:forEach items="${quesBookClasses1}" var="dic">
											<option value="${dic.code}" <c:if test="${dic.code eq form.bookSecClass}">selected="selected"</c:if>>${dic.value}</option>
										</c:forEach> 
										</c:if>
										<c:if test="${form.bookClass eq '2'}">
											<c:forEach items="${quesBookClasses2}" var="dic">
											<option value="${dic.code}" <c:if test="${dic.code eq form.bookSecClass}">selected="selected"</c:if>>${dic.value}</option>
										</c:forEach> 
										</c:if>
										<c:if test="${form.bookClass eq '3'}">
											<c:forEach items="${quesBookClasses3}" var="dic">
											<option value="${dic.code}" <c:if test="${dic.code eq form.bookSecClass}">selected="selected"</c:if>>${dic.value}</option>
										</c:forEach> 
										</c:if>
										<c:if test="${form.bookClass eq '4'}">
											<c:forEach items="${quesBookClasses4}" var="dic">
											<option value="${dic.code}" <c:if test="${dic.code eq form.bookSecClass}">selected="selected"</c:if>>${dic.value}</option>
										</c:forEach> 
										</c:if>
									</select>
								</td>
							</tr>
							<tr>
								<th class="col-xs-2 ">图书页码</th>
								<td class="col-xs-4">
									<input type="text" class="form-control" name="pageNum" value="${form.pageNum}" />
								</td>
								<th class="col-xs-2 ">用户等级</th>
								<td class="col-xs-4">
									<select name="userType" class="form-control validate[required]">
										<option value="">请选择</option>
										<c:forEach items="${userTypes}" var="state">
											<option value="${state.code}" <c:if test="${state.code eq form.bookClass}">selected="selected"</c:if>>${state.value}</option>
										</c:forEach> 
									</select>
								</td>
							</tr>
							<tr>
								<th class="col-xs-2 ">问题详情</th>
								<td class="col-xs-4" colspan="3">
									<textarea class="form-control validate[required,maxSize[1000]]" data-errormessage-value-missing="请填写问题详情"
										data-errormessage-range-overflow="问题详情长度不能超过1000个字" rows="10" name="quesDescribe" 
										placeholder="请详细描述您要提出的问题">${form.quesDescribe}</textarea>
								</td>
							</tr>
							<tr>
								<th class="col-xs-2 ">问题图片</th>
								<td class="col-xs-4" colspan="3">
									<button type="button" class="btn btn-sm tool-btn attach-upload">上传图片</button>
									<table data-ms-class="attachment"
										class="attach-no-table upload-download-element" data-show-upload-button=false
										data-title="上传附件" data-is-readonly=false data-box-id="${form.quesId }"
										>
									</table>
								</td>
							</tr>
							<tr>
								<th class="col-xs-2 ">问题难度</th>
								<td class="col-xs-4" colspan="3">
									<c:forEach items="${quesDiffLevels}" var="state">
										<c:if test="${state.code eq form.quesDiffLevel}">${state.value}</c:if>
									</c:forEach> 
								</td>
							</tr>
						</table>
					</div>
				</div>
			</form>
		</div>
		<!-- 表单 end-->
		
	</div>
	<script type="text/javascript" src="${base_href}/static/ui-frame/jquery/1.11.3/jquery.js"></script>
	<script type="text/javascript" src="${base_href}/static/ui-frame/bootstrap/3.3.5/js/bootstrap.js"></script>
	<script type="text/javascript" src="${base_href}/static/ui-frame/bootstrap-dialog3/js/bootstrap-dialog.js"></script>
	<script type="text/javascript" src="${base_href}/static/ui-frame/validation-engine/jquery.validationEngine-zh_CN.js"></script>
	<script type="text/javascript" src="${base_href}/static/ui-frame/validation-engine/jquery.validationEngine.js"></script>
	<script type="text/javascript" src="${base_href}/static/ui-frame/My97DatePicker/WdatePicker.js"></script>
	
	<script type="text/javascript" src="${base_href}/static/ui-frame/jquery-easyui/1.4.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${base_href}/static/ui-frame/jquery-easyui/1.4.3/easyui.util.js"></script>
	
	<script type="text/javascript" src="${base_href}/static/ui-frame/webuploader/0.1.5/mbs-upload.js"></script>
	<script type="text/javascript" src="${base_href}/static/ui-frame/viewer/viewer.js"></script>
	
	<script type="text/javascript">
	$(function() {
		$('#form').validationEngine('attach', {
			maxErrorsPerField : 1,
			scroll : false,
			validationEventTrigger : "keyup blur change focus",
			ValidateNoneVisibleFields : true,//验证隐藏域
			promptPosition : "topRight" //验证弹出框的位置，topRight,topLeft,bottomRight,bottomLeft,centerRight,centerLeft,inline
		});
		
		$("#saveBtn").click(function(){
			$('a.hide-next-btn-show').each(function(i, val) {$(this).click();});
			if ($('#form').validationEngine('validate')) {
				return $.post(basePath+ "/quesCollection/saveQuestion.json",$("#form").serialize(), function(){
					BootstrapDialog.alert("保存成功！")
				},'json');
			}
		});
		
		$(".attach-upload").click(function(){
			$(this).next().uploaddownload();
		});
		
		var quesBookClasses1 ;
		var quesBookClasses2 ;
		var quesBookClasses3 ;
		var quesBookClasses4 ;
		$.ajax({
			url:  basePath+"/quesCollection/getDicsByParam.json?model=ques_book_class_1",
			type: "get",
			async: false, //不可异步,必须同步
			dataType:"json",
			success: function(r){
				quesBookClasses1 = r;
				}
		})
		$.ajax({
			url:  basePath+"/quesCollection/getDicsByParam.json?model=ques_book_class_2",
			type: "get",
			async: false, //不可异步,必须同步
			dataType:"json",
			success: function(r){
				quesBookClasses2 = r;
				}
		})
		$.ajax({
			url:  basePath+"/quesCollection/getDicsByParam.json?model=ques_book_class_3",
			type: "get",
			async: false, //不可异步,必须同步
			dataType:"json",
			success: function(r){
				quesBookClasses3 = r;
				}
		})
		$.ajax({
			url:  basePath+"/quesCollection/getDicsByParam.json?model=ques_book_class_4",
			type: "get",
			async: false, //不可异步,必须同步
			dataType:"json",
			success: function(r){
				quesBookClasses4 = r;
				}
		})
		
		$("select[name='bookClass']").change(function(){
			var checkText=$(this).find("option:selected").text();
			var checkValue=$(this).val();
			if(checkValue == undefined || checkValue == null || checkValue ==""){
				$("select[name='bookSecClass']").empty();
				$("select[name='bookSecClass']").find("option").remove();
				return;
			}
			if(checkValue == 1){
				$("select[name='bookSecClass']").empty();
				$("select[name='bookSecClass']").find("option").remove();
				
				for(var k = 0;k < quesBookClasses1.length;k++){
					var option = "<option value='"+quesBookClasses1[k].code+"'>"+quesBookClasses1[k].value+"</option>";
					$("select[name='bookSecClass']").append(option);
				}
			}
			if(checkValue == 2){
				$("select[name='bookSecClass']").empty();
				$("select[name='bookSecClass']").find("option").remove();
				for(var k = 0;k < quesBookClasses2.length;k++){
					var option = "<option value='"+quesBookClasses2[k].code+"'>"+quesBookClasses2[k].value+"</option>";
					$("select[name='bookSecClass']").append(option);
				}
			}
			if(checkValue == 3){
				$("select[name='bookSecClass']").empty();
				$("select[name='bookSecClass']").find("option").remove();
				for(var k = 0;k < quesBookClasses3.length;k++){
					var option = "<option value='"+quesBookClasses3[k].code+"'>"+quesBookClasses3[k].value+"</option>";
					$("select[name='bookSecClass']").append(option);
				}
			}
			if(checkValue == 4){
				$("select[name='bookSecClass']").empty();
				$("select[name='bookSecClass']").find("option").remove();
				for(var k = 0;k < quesBookClasses4.length;k++){
					var option = "<option value='"+quesBookClasses4[k].code+"'>"+quesBookClasses4[k].value+"</option>";
					$("select[name='bookSecClass']").append(option);
				}
			}
		});
		
		$(document).on('click', 'img', function(){
			$(this).viewer();
		});
	});
	</script>
</body>
</html>
